﻿@{
    Layout = "~/Views/Shared/_List.cshtml";
    var module = "/Draw/Entry";
    var moduleSize = new { width = 1000, height = 700 };
}
<div class="layui-row">
    <div class="layui-col-xs7">
        <div class="layui-search layui-form">
            <div class="layui-form-search">
                <div class="layui-inline">
                    <select id="selType" lay-filter="typeChange">
                        <option value="">分类</option>
                        @foreach (Domain.Com.BasicType item in ViewBag.Types)
                        {
                            <option value="@(item.Id)">@(item.Title)</option>
                        }
                    </select>
                </div>
                <div class="layui-inline">
                    <select id="selType2" lay-filter="type2Change">
                        <option value="">分类2</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <select id="selType3">
                        <option value="">分类3</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <input id="txtKeywords" class="layui-input" placeholder="请输入查询条件" data-type="reload">
                </div>
                <a id="btnSearch" class="layui-btn" data-type="reload">查询</a>
            </div>
        </div>
        <table id="list" lay-filter="list"></table>
    </div>
    <div class="layui-col-xs5">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" id="txtPrompt" name="Prompt" style="height:400px"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">平台</label>
                <div class="layui-input-block">
                    <input type="checkbox" id="chkVolcengine" title="豆包大模型" checked>
                    <input type="checkbox" id="chkTencentCloud" title="腾讯混元大模型" checked>
                    <input type="checkbox" id="chkWanX" title="通义万相大模型" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">批次</label>
                <div class="layui-input-inline">
                    <select id="selNum">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submit">提交</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="VolcengineTitle layui-input-block hide">豆包大模型</div>
                <div class="VolcengineImg layui-input-block hide">
                </div>
                <br />
                <br />
                <div class="TencentCloudTitle layui-input-block hide">腾讯混元大模型</div>
                <div class="TencentCloudImg layui-input-block hide">
                </div>
                <br />
                <br />
                <div class="WanXTitle layui-input-block hide">通义万相大模型</div>
                <div class="WanXImg layui-input-block hide">
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
</script>

@section script {
    <script>
        var $;
        layui.use(['table', 'form'], function () {
            var table = layui.table
                , form = layui.form;
            var tableIns = table.render({
                elem: '#list'
                , id: 'list'
                , url: '@module/GetList'
                , where: {
                    Type: $('#selType').val(),
                    Type2: $('#selType2').val(),
                    Type3: $('#selType3').val(),
                    Keywords: $('#txtKeywords').val()
                }
                , page: true
                , limits: [10, 15, 20, 25, 30]
                , limit: 15
                , height: 'full-68'
                , cols: [[ //标题栏
                    { checkbox: true, fixed: true }
                    , { title: '分类', field: 'typeName', width: 150 }
                    , { title: '分类2', field: 'type2Name', width: 150 }
                    , { title: '分类3', field: 'type3Name', width: 150 }
                    , { title: '标题', field: 'title' }
                    , { title: '操作', width: 140, align: 'center', toolbar: '#barDemo' }

                ]]
            });

            $ = layui.$;
            var active = {
                reload: function () {

                    table.reload('list', {
                        where: {
                            Type: $('#selType').val(),
                            Type2: $('#selType2').val(),
                            Type3: $('#selType3').val(),
                            Keywords: $('#txtKeywords').val()
                        }, page: {
                            curr: 1
                        }
                    });
                }
            };

            function activeCall(obj) {
                var type = $(obj).data('type');
                active[type] ? active[type].call(obj) : '';
            }
            $('#btnSearch').on('click', function () {
                activeCall(this);
            });
            $('#txtKeyword').on('keyup', function (e) {
                if (e.keyCode === 13) activeCall(this);
            });

            form.on('select(typeChange)', function (data) {
                $("#selType2").empty();
                $("#selType2").append("<option value=\"\">分类2</option>");
                $("#selType3").empty();
                $("#selType3").append("<option value=\"\">分类3</option>");
                var type = $("#selType").val();
                if (type) {
                    $.post("/Basic/BasicType/GetList", { Type: "EntryType", ParentId: type }, function (d) {
                        if (d.code === 0) {
                            d.data.forEach(function (item) {
                                $("#selType2").append("<option value=\"" + item.id + "\">" + item.title + "</option>");
                            });
                        }
                        form.render('select');
                    });
                }else{
                    form.render('select');
                }
            });

            form.on('select(type2Change)', function (data) {
                $("#selType3").empty();
                $("#selType3").append("<option value=\"\">分类3</option>");
                var type2 = $("#selType2").val();
                if (type2) {
                    $.post("/Basic/BasicType/GetList", { Type: "EntryType", ParentId: type2 }, function (d) {
                        if (d.code === 0) {
                            d.data.forEach(function (item) {
                                $("#selType3").append("<option value=\"" + item.id + "\">" + item.title + "</option>");
                            });
                        }
                        form.render('select');
                    });
                }else{
                    form.render('select');
                }
            });

            //监听工具条
            table.on('tool(list)', function (obj) {
                var data = obj.data;
                if (obj.event === 'add') {
                    $("#txtPrompt").val($("#txtPrompt").val() + data.typeName + "," + data.type2Name + "," + data.type3Name + "," + data.title + ";");
                }
            });

            //监听提交
            let loadIndex = null;
            form.on('submit(submit)', function (data) {
                // 1. 显示加载层（带透明遮罩，禁止点击）
                loadIndex = layer.load(2);
                var formData = data.field;

                var volcengine = true;
                    var tencentCloud = true;
                    var wanX = true;
                var volcengineApiNum = 0;
                var tencentCloudApiNum = 0;
                var wanXApiNum = 0;

                if($("#chkVolcengine").prop('checked')){
                    volcengine = false;
                    var volcengineNum = parseInt($("#selNum").val());
                    $(".VolcengineTitle").removeClass("hide");
                    $(".VolcengineImg").removeClass("hide");
                    for(var i = 0; i < volcengineNum; i++){
                        setTimeout(() => {
                            $.post("VolcengineDraw", formData, function (d) {
                                volcengineApiNum++;
                                console.log("Volcengine", volcengineApiNum);
                                if(volcengineApiNum == volcengineNum){
                                    volcengine = true;
                                    if(tencentCloud){
                                        layer.close(loadIndex);
                                    }
                                }

                                if (d.code === 0) {
                                    $(".VolcengineTitle").append(" 第"+volcengineApiNum+"次请求成功;");
                                    d.data.image_urls.forEach(function (item) {
                                        $(".VolcengineImg").append("<a href='"+ item + "' target='_blank'><img src='"+ item +"' width='200' /></a>");
                                    });
                                }
                                else {
                                    $(".VolcengineTitle").append(" 第"+volcengineApiNum+"次请求失败，错误信息:"+ d.msg+";");
                                }
                            })
                        }, i * 1000);
                    }
                }
                if($("#chkTencentCloud").prop('checked')){
                    tencentCloud = false;
                    var tencentCloudNum = parseInt($("#selNum").val());
                    $(".TencentCloudTitle").removeClass("hide");
                    $(".TencentCloudImg").removeClass("hide");
                    for(var j = 0; j < tencentCloudNum; j++){
                        setTimeout(() => {
                            $.post("TencentCloudDraw", formData, function (d) {
                                tencentCloudApiNum++;
                                console.log("TencentCloud", tencentCloudApiNum);
                                if(tencentCloudApiNum == tencentCloudNum){
                                    tencentCloud = true;
                                    if(volcengine){
                                        layer.close(loadIndex);
                                    }
                                }
                                if (d.code === 0) {
                                    $(".TencentCloudTitle").append(" 第"+tencentCloudApiNum+"次请求成功;");
                                        $(".TencentCloudImg").append("<a href='"+ d.data.resultImage + "' target='_blank'><img src='"+ d.data.resultImage +"' width='200' /></a>");
                                }
                                else {
                                    $(".TencentCloudTitle").append(" 第"+tencentCloudApiNum+"次请求失败，错误信息:"+ d.msg+";");
                                }
                            })
                        }, j * 1000);
                    }
                }
                if($("#chkWanX").prop('checked')){
                    wanX = false;
                    var wanXNum = parseInt($("#selNum").val());
                    $(".WanXTitle").removeClass("hide");
                    $(".WanXImg").removeClass("hide");
                    for(var k = 0; k < wanXNum; k++){
                        setTimeout(() => {
                            $.post("WanXDraw", formData, function (d) {
                                wanXApiNum++;
                                console.log("WanX", wanXApiNum);
                                if(wanXApiNum == wanXNum){
                                    wanX = true;
                                    if(tencentCloud){
                                        layer.close(loadIndex);
                                    }
                                }

                                if (d.code === 0) {
                                    $(".WanXTitle").append(" 第"+wanXApiNum+"次请求成功;");
                                     d.data.forEach(function (item) {
                                        $(".WanXImg").append("<a href='"+ item.url + "' target='_blank'><img src='"+ item.url +"' width='200' /></a>");
                                    });
                                }
                                else {
                                    $(".WanXTitle").append(" 第"+wanXApiNum+"次请求失败，错误信息:"+ d.msg+";");
                                }
                            })
                        }, k * 1000);
                    }
                }

                return false;
            });
        });
    </script>
}


